<rd-header>
  <rd-header-title title-text="Create Custom template"></rd-header-title>
  <rd-header-content> <a ui-sref="docker.templates.custom">Custom Templates</a> &gt; Create Custom template </rd-header-content>
</rd-header>

<div class="row" ng-if="!$ctrl.state.loading">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal" name="customTemplateForm">
          <custom-template-common-fields form-values="$ctrl.formValues"></custom-template-common-fields>

          <!-- build-method -->
          <div ng-if="!$ctrl.state.fromStack">
            <div class="col-sm-12 form-section-title">
              Build method
            </div>
            <div class="form-group"></div>
            <div class="form-group" style="margin-bottom: 0;">
              <div class="boxselector_wrapper">
                <div>
                  <input type="radio" id="method_editor" ng-model="$ctrl.state.Method" value="editor" ng-change="$ctrl.onChangeMethod()" />
                  <label for="method_editor">
                    <div class="boxselector_header">
                      <i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px;"></i>
                      Web editor
                    </div>
                    <p>Use our Web editor</p>
                  </label>
                </div>
                <div>
                  <input type="radio" id="method_upload" ng-model="$ctrl.state.Method" value="upload" ng-change="$ctrl.onChangeMethod()" />
                  <label for="method_upload">
                    <div class="boxselector_header">
                      <i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px;"></i>
                      Upload
                    </div>
                    <p>Upload from your computer</p>
                  </label>
                </div>
                <div>
                  <input type="radio" id="method_repository" ng-model="$ctrl.state.Method" value="repository" ng-change="$ctrl.onChangeMethod()" />
                  <label for="method_repository">
                    <div class="boxselector_header">
                      <i class="fab fa-git" aria-hidden="true" style="margin-right: 2px;"></i>
                      Repository
                    </div>
                    <p>Use a git repository</p>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <!-- !build-method -->
          <!-- web-editor -->
          <div ng-show="$ctrl.state.Method === 'editor'">
            <div class="col-sm-12 form-section-title">
              Web editor
            </div>
            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                You can get more information about Compose file format in the
                <a href="https://docs.docker.com/compose/compose-file/" target="_blank">
                  official documentation
                </a>
                .
              </span>
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <code-editor
                  identifier="custom-template-creation-editor"
                  placeholder="# Define or paste the content of your docker-compose file here"
                  yml="true"
                  value="$ctrl.formValues.FileContent"
                  on-change="($ctrl.editorUpdate)"
                ></code-editor>
              </div>
            </div>
          </div>
          <!-- !web-editor -->
          <!-- upload -->
          <div ng-show="$ctrl.state.Method === 'upload'">
            <div class="col-sm-12 form-section-title">
              Upload
            </div>
            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                You can upload a Compose file from your computer.
              </span>
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formValues.File">
                  Select file
                </button>
                <span style="margin-left: 5px;">
                  {{ $ctrl.formValues.File.name }}
                  <i class="fa fa-times red-icon" ng-if="!$ctrl.formValues.File" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
          <!-- !upload -->
          <!-- repository -->
          <div ng-show="$ctrl.state.Method === 'repository'">
            <div class="col-sm-12 form-section-title">
              Git repository
            </div>
            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                You can use the URL of a git repository.
              </span>
            </div>
            <div class="form-group">
              <label for="template_repository_url" class="col-sm-2 control-label text-left">Repository URL</label>
              <div class="col-sm-10">
                <input
                  type="text"
                  class="form-control"
                  ng-model="$ctrl.formValues.RepositoryURL"
                  id="template_repository_url"
                  placeholder="https://github.com/portainer/portainer-compose"
                />
              </div>
            </div>
            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                Specify a reference of the repository using the following syntax: branches with
                <code>refs/heads/branch_name</code> or tags with <code>refs/tags/tag_name</code>. If not specified, will use the default <code>HEAD</code> reference normally the
                <code>master</code> branch.
              </span>
            </div>
            <div class="form-group">
              <label for="template_repository_url" class="col-sm-2 control-label text-left">Repository reference</label>
              <div class="col-sm-10">
                <input
                  type="text"
                  class="form-control"
                  ng-model="$ctrl.formValues.RepositoryReferenceName"
                  id="template_repository_reference_name"
                  placeholder="refs/heads/master"
                />
              </div>
            </div>
            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                Indicate the path to the Compose file from the root of your repository.
              </span>
            </div>
            <div class="form-group">
              <label for="template_repository_path" class="col-sm-2 control-label text-left">Compose path</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" ng-model="$ctrl.formValues.ComposeFilePathInRepository" id="template_repository_path" placeholder="docker-compose.yml" />
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <label class="control-label text-left">
                  Authentication
                </label>
                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="$ctrl.formValues.RepositoryAuthentication" /><i></i> </label>
              </div>
            </div>
            <div class="form-group" ng-if="$ctrl.formValues.RepositoryAuthentication">
              <span class="col-sm-12 text-muted small">
                If your git account has 2FA enabled, you may receive an
                <code>authentication required</code> error when creating your template. In this case, you will need to provide a personal-access token instead of your password.
              </span>
            </div>
            <div class="form-group" ng-if="$ctrl.formValues.RepositoryAuthentication">
              <label for="repository_username" class="col-sm-1 control-label text-left">Username</label>
              <div class="col-sm-11 col-md-5">
                <input type="text" class="form-control" ng-model="$ctrl.formValues.RepositoryUsername" name="repository_username" placeholder="myGitUser" />
              </div>
              <label for="repository_password" class="col-sm-1 control-label text-left">
                Password
              </label>
              <div class="col-sm-11 col-md-5">
                <input type="password" class="form-control" ng-model="$ctrl.formValues.RepositoryPassword" name="repository_password" placeholder="myPassword" />
              </div>
            </div>
          </div>
          <!-- !repository -->
          <por-access-control-form form-data="$ctrl.formValues.AccessControlData"></por-access-control-form>

          <!-- actions -->
          <div class="col-sm-12 form-section-title">
            Actions
          </div>
          <div class="form-group">
            <div class="col-sm-12">
              <button
                type="button"
                class="btn btn-primary btn-sm"
                ng-disabled="$ctrl.state.actionInProgress || customTemplateForm.$invalid
              || ($ctrl.state.Method === 'editor' && !$ctrl.formValues.FileContent)
              || ($ctrl.state.Method === 'upload' && !$ctrl.formValues.File)
              || ($ctrl.state.Method === 'repository' && ((!$ctrl.formValues.RepositoryURL || !$ctrl.formValues.ComposeFilePathInRepository) || ($ctrl.formValues.RepositoryAuthentication && (!$ctrl.formValues.RepositoryUsername || !$ctrl.formValues.RepositoryPassword))))
              || !$ctrl.formValues.Title"
                ng-click="$ctrl.createCustomTemplate()"
                button-spinner="$ctrl.state.actionInProgress"
              >
                <span ng-hide="$ctrl.state.actionInProgress">Create custom template</span>
                <span ng-show="$ctrl.state.actionInProgress">Creation in progress...</span>
              </button>
              <span class="text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px;">
                {{ $ctrl.state.formValidationError }}
              </span>
            </div>
          </div>
          <!-- !actions -->
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
